<template>
  <div style="margin:5% auto">
    <el-select
      v-model="value"
      filterable
      clearable
      placeholder="全部"
      style=" margin: 0 30px"
    >
      <el-option
        v-for="item in options"
        :key="item.label"
        :label="item.label"
        :value="item.label"
      >
      </el-option>
    </el-select>
    <el-button
      type="primary"
      size="mini"
      plain
      icon="el-icon-search"
      @click="dianji"
      style="width: 50px ;margin-left: 40px "
    ></el-button>
    <el-button type="success" size="mini" @click="dialogVisible = true"
    >添加
    </el-button
    >
    <el-dialog :visible.sync="dialogVisible">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="hanClose"
      >
        <p>
          角色名称:
          <el-input
            v-model="add.roleName"
            placeholder=""
            style="width: 200px; margin-left: 25px"
          ></el-input>
        </p>
        <p>
          权限名称:
          <el-select
            v-model="add.permissionId"
            multiple
            collapse-tags
            style="width: 200px; margin-left: 25px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in permissionIdArr"
              :key="item.permissionId"
              :label="item.permissionName"
              :value="item.permissionId"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          备注:
          <el-input
            v-model="add.remark"
            placeholder=""
            style="width: 200px; margin-left: 55px"
          ></el-input>
        </p>
        <p slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addd">确 定</el-button>
        </p>
      </el-dialog>
    </el-dialog>

    <el-table :data="a" style="width: 95% ;margin: 0 auto; text-align: center">
      <el-table-column prop="roleId" label="角色ID" width="180">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180">
      </el-table-column>
      <el-table-column prop="roleCreateTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="tempTwo" label="权限名称" width="180">
        <template slot-scope="{ row: { tempTwo } }">
          <span v-html="tempTwo"></span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            plain
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑
          </el-button
          >
          <el-button
            :data="b"
            size="mini"
            type="danger"
            plain
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <!--修改-->
      <el-dialog
        title="修改角色信息"
        :visible.sync="dialogVisibles"
        width="50%"
        :before-close="hanClose"
      >
        <p>
          角色ID:
          <el-input
            v-model="update.roleId"
            placeholder=""
            style="width: 200px; margin-left: 38px"
            :disabled="true"
          ></el-input>
        </p>
        <p>
          角色名称:
          <el-input
            v-model="update.roleName"
            placeholder=""
            style="width: 200px; margin-left: 25px"
          ></el-input>
        </p>
        <p>
          权限名称:
          <el-select
            v-model="update.permissionName"
            multiple
            collapse-tags
            style="width: 200px; margin-left: 25px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in permissionIdArr"
              :key="item.permissionId"
              :label="item.permissionName"
              :value="item.permissionId"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          备注:
          <el-input
            v-model="update.remark"
            placeholder=""
            style="width: 200px; margin-left: 55px"
          ></el-input>
        </p>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editData">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="block" style="margin-left: 30px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zpage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuanXian',
  data () {
    return {
      // 姓名搜索
      options: [
        { value: '选项1', label: '业务员' },
        { value: '选项2', label: '区域经理' },
        { value: '选项3', label: '系统管理员' }
      ],
      value: '',
      add: { permissionId: '', remark: '', roleName: '' },
      permissionIdArr: [],
      a: [],
      b: [],
      input: '',
      bian: '',
      dialogVisible: false,
      dialogVisibles: false,
      formLabelWidth: '50px',
      update: {
        roleId: '',
        roleName: '',
        permissionName: '',
        remark: ''
      },
      currentPage: 10,
      page: 1,
      zpage: 0
    }
  },
  created: function () {
    this.$axios.post('user/queryRoles', {
      page: this.page,
      limit: this.currentPage
    }, { headers: { 'Content-Type': 'application/json' } })
      .then((response) => {
        window.console.log(response.data.data)
        this.a = response.data.data
        this.zpage = Math.ceil(this.a.length)
        for (var i = 0; i < this.a.length; i++) {
          // 转换时间格式
          this.a[i].tempOne = ''
          this.a[i].tempTwo = ''
          this.a[i].roleCreateTime = this.formatDate(new Date(this.a[i].roleCreateTime))
          for (var j = 0; j < this.a[i].permission.length; j++) {
            this.a[i].tempOne += this.a[i].permission[j].permissionId + '<br>'
            this.a[i].tempTwo += this.a[i].permission[j].permissionName + '<br>'
          }
        }
      })
      .catch(function (error) {
        window.console.log(error)
      })
    this.$axios.post('user/queryParentPermission', {}, { headers: { 'Content-Type': 'application/json' } })
      .then((response) => {
        // window.console.log(response.data.data);
        this.permissionIdArr = response.data.data
      })
      .catch(function (error) {
        window.console.log(error)
      })
  },
  methods: {
    // 转换data
    zhuan: function () {
      for (var i = 0; i < this.a.length; i++) {
        // 转换时间格式
        this.a[i].tempOne = ''
        this.a[i].tempTwo = ''
        this.a[i].roleCreateTime = this.formatDate(new Date(this.a[i].roleCreateTime))
        for (var j = 0; j < this.a[i].permission.length; j++) {
          // window.console.log(this.orderData[i].productInfo[j].productId);
          this.a[i].tempOne += this.a[i].permission[j].permissionId + '<br>'
          this.a[i].tempTwo += this.a[i].permission[j].permissionName + '<br>'
        }
      }
    },
    // 请求
    requestData: function () {
      this.$axios.post('user/queryRoles', {
        page: this.page,
        limit: this.currentPage
      }, { headers: { 'Content-Type': 'application/json' } })
        .then((response) => {
          window.console.log(response.data.data)
          this.a = response.data.data
          this.zpage = Math.ceil(this.a.length)
          this.zhuan()
        })
        .catch(function (error) {
          window.console.log(error)
        })
    },
    dianji: function () {
      window.console.log(this.value)
      this.$axios.post('user/queryRoles', {
        roleName: this.value,
        page: this.page,
        limit: this.currentPage
      }, { headers: { 'Content-Type': 'application/json' } })
        .then((response) => {
          window.console.log(response.data.data)
          this.a = response.data.data
          this.zpage = Math.ceil(this.a.length)
          this.zhuan()
        })
        .catch(function (error) {
          window.console.log(error)
        })
    },
    // 添加
    addd: function () {
      this.dialogVisible = false
      var id = ''
      for (var i = 0; i < this.add.permissionId.length; i++) {
        if (i === this.add.permissionId.length - 1) {
          id += this.add.permissionId[i]
        } else {
          id += this.add.permissionId[i] + ','
        }
      }
      window.console.log(id)
      this.$axios.post('user/addRole', {
        roleName: this.add.roleName,
        permissionId: id,
        remark: this.add.remark
      }, { headers: { 'Content-Type': 'application/json' } })
        .then((response) => {
          window.console.log(response)
          if (response.data.code === '200') {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.requestData()
          } else if (response.data.code === '400') {
            this.$message({
              message: '添加失败',
              type: 'error'
            })
          } else if (response.data.code === '600') {
            this.$message({
              message: '登录过期，请重新登录',
              type: 'warning'
            })
          }
        })
        .catch(function (error) {
          window.console.log(error)
        })
    },
    hanClose (done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {
        })
    },
    // 编辑
    handleEdit (index, row) {
      this.dialogVisibles = true
      window.console.log(index, row)
      this.update.roleId = row.roleId
      this.update.roleName = row.roleName
      this.update.permissionName = row.permissionName
      this.update.remark = row.remark
    },
    // 修改
    editData () {
      this.dialogVisibles = false
      var editPid = ''
      for (var i = 0; i < this.update.permissionName.length; i++) {
        if (i === this.update.permissionName.length - 1) {
          editPid += this.update.permissionName[i]
        } else {
          editPid += this.update.permissionName[i] + ','
        }
      }
      this.$axios.post('user/editRole', {
        roleId: this.update.roleId,
        roleName: this.update.roleName,
        permissionId: editPid,
        remark: this.update.remark
      }, { headers: { 'Content-Type': 'application/json' } }).then((response) => {
        window.console.log(response)
        if (response.data.code === '200') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.requestData()
        } else if (response.data.code === '400') {
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        } else if (response.data.code === '600') {
          this.$message({
            message: '登录过期，请重新登录',
            type: 'warning'
          })
        }
      }).catch(function (error) {
        window.console.log(error)
      })
    },
    // 删除
    async handleDelete (index, row) {
      window.console.log(row)
      const data = await this.$axios.post('user/delRole', { roleId: row.roleId })
      window.console.log(data)
      this.requestData()
    },
    handleimpower (index, row) {
      window.console.log(row)
    },
    // 页面条数改变
    handleSizeChange (newsize) {
      window.console.log(newsize)
      this.currentPage = newsize
      this.$axios.post('user/queryRoles', {
        page: this.page,
        limit: this.currentPage
      }, { headers: { 'Content-Type': 'application/json' } }).then((res) => {
        this.a = res.data.data
        this.zpage = Math.ceil(this.a.length)
        this.zhuan()
      })
    },
    // 当前页数改变
    handleCurrentChange (newpage) {
      window.console.log('newpage' + newpage)
      this.page = newpage
      window.console.log('this.page' + this.page)
      this.$axios.post('user/queryRoles', {
        page: this.page,
        limit: 100
      }, { headers: { 'Content-Type': 'application/json' } }).then((res) => {
        // window.console.log(res);
        this.a = res.data.data
        this.zpage = Math.ceil(this.a.length)
        this.zhuan()
      })
    }
  }
}
</script>

<style scoped>
  .updateRole el-input {
    width: 100px;
  }
</style>
